<template>
	<div class="lhj-wrap">
    <div id="main">
        <div class="lhj_main_top">
            <div class="lhj_tit"></div>
            <div class="lhj" id="top">
                <div id="machine1" class="slotMachine machine1">
                    <div class="machine">
                        <div class="slot slot1">
                            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/slot1.png">
                            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/slot1.png">
                        </div>
                    </div>
                </div>
                <div id="machine2" class="slotMachine machine2">
                    <div class="machine">
                        <div class="slot slot2">
                            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/slot1.png">
                            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/slot1.png">
                        </div>
                    </div>
                </div>
                <div id="yaogan" class="yaogan-wrap">
                    <img class="dizuo" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/dizuo.png">
                    <img class="yaogan" src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/yaogan.png">
                </div>
                <div id="machine3" class="slotMachine machine3">
                    <div class="machine">
                        <div class="slot slot3">
                            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/slot1.png">
                            <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/slot1.png">
                        </div>
                    </div>
                </div>
                <div class="slotMachineButton fxBtn-publicode" @click="handleClickMachine"></div>
                <div class="shuoming">
                    <h2>游戏说明</h2>
                    <div class="align-left">
                        <p class="wordWrap">{{ gameinfo.description }}</p>
                        <p v-if="gameinfo.cost_point > 0">游戏消耗{{ point_name }} {{ gameinfo.cost_point }}</p>
                        <p v-if="gameinfo.give_point > 0">参与游戏即送{{ gameinfo.give_point }}{{ point_name }},
                          <span v-if="gameinfo.give_point_to_no_prize_only == 1">仅送给未中奖的用户.</span>
                        </p>
                    </div>
                </div>
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/deng1.png" class="deng deng1" :class="linghtActive? 'active': ''">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/deng2.png" class="deng deng2" :class="linghtActive? '': 'active'">
            </div>
        </div>
        <div class="x-same x-same_lhj lhj_top_dzp">
            <div class="x-img" style="margin-top: 10px;">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/ggl_xian_lhj.png">
                <b>活动奖品</b>
            </div>
            <ul class="liwu prize-list" v-if="gameprizeinfo && gameprizeinfo.length > 0">
                <li>一等奖：{{ gameprizeinfo[0].msg }} </li>
                <li>二等奖：{{ gameprizeinfo[1].msg }} </li>
                <li>三等奖：{{ gameprizeinfo[2].msg }} </li>
                <li>普通奖：{{ gameprizeinfo[3].msg }}</li>
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao1">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao2">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao3">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao4">
            </ul>
        </div>
        <div class="x-same x-same_lhj lhj_int_dzp">
            <div class="x-img">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/ggl_xian_lhj.png">
                <b>活动时间</b>
            </div>
            <ul class="time">
                <li>{{ gameinfo.start_time }} 至 {{ gameinfo.end_time }}</li>
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao1">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao2">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao3">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao4">
            </ul>
        </div>
        <div class="win-record x-same x-same_lhj">
            <div class="x-img">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/ggl_xian_lhj.png">
                <b>中奖排名</b>
            </div>
            <div class="record_table">
                <div class="win-nav">
                    <span>昵称</span>
                    <span>奖品</span>
                    <span>等级</span>
                    <span>中奖时间</span>
                </div>
                <div class="win-list-con">
                  <ul>
                    <!-- <van-list
                      v-model="loading"
                      :finished="finished"
                      finished-text=""
                      @load="onLoad"
                    > -->
                    <wx-scroll-view :scroll-y="canScrollY" style="height:270px" @scrolltolower="onLoad">
                      <li v-for="(item, index) in winerLists" :key="index">
                        <span class="win-name">{{ item.nickname }}</span>
                        <span class="win-award">{{ item.winer }}</span>
                        <span class="win-award">{{ item.level }}</span>
                        <span class="win-time">{{ item.create_time }}</span>
                      </li>
                    </wx-scroll-view>
                    <!-- </van-list> -->
                  </ul>
                </div>

                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao1">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao2">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao3">
                <img src="https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/jiaobiao.png" class="jiaobiao jiaobiao4">
            </div>
        </div>
        <game-result-dialog
          :visible.sync="gameResultVisible"
          :game_prize_id="game_prize_id"
          :getGamePrize="getGamePrize"
          @gameReload="gameReload"></game-result-dialog>
    </div>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
          <!-- 粉丝才能购买商家二维码弹窗 -->
      <shop-code ref="shopCode" :fromType="1"></shop-code>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)
  import gameResultDialog from '../components/gameResultDialog'
  import ShopCode from '@/components/ShopCode'
  import { activityGame, playGames } from '@/api/marketGame/gameList'
  import { refreshPage, mpShare } from '../utils/utils'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        canScrollY:true,
        linghtActive: true,
        loading: false,
        finished: false,
        gameResultVisible: false, // 游戏结果弹窗
        need_subscribe: 0,
        bstop: 1,
        gameinfo: {},
        gameprizeinfo: [],
        point_name: '',
        cost_point: '',
        give_point: '',
        winerLists: [],
        postParm: {},
        postData: {
          type: 10,
          id: '',
          order_id: '',
          p: 1
        },
        game_prize_id: '', // 获奖数据
        getGamePrize: false // 中奖或是未中奖
      }
    },
    components: {
      gameResultDialog,
      SmallLogin,
      ShopCode
    },
    methods: {
      // 加载更多
      onLoad() {
        this.activityGameFn()
      },
      JumpTo() {
        this.$JumpName(this, 'prize-list')
      },
      /**
       * 点击开始抽奖按钮
       */
      handleClickMachine() {
        if (this.bstop) {
          document.querySelector('.yaogan').classList.add('cur')
          this.bstop = 0
          document.querySelector('.slot1').classList.add('cartoon')
          setTimeout(() => {
            document.querySelector('.slot2').classList.add('cartoon1')
          }, 500)
          setTimeout(() => {
            document.querySelector('.slot3').classList.add('cartoon')
          }, 1000)
          setTimeout(() => {
            this.getGift()
          }, 2000)
        }
      },
      getGift() {
        playGames(this.postParm).then(res => {
          const resData = res.data
          document.querySelector('.slot1').classList.remove('cartoon')
          document.querySelector('.slot3').classList.remove('cartoon')
          document.querySelector('.slot2').classList.remove('cartoon1')
          if (res.status == 1) {
            if (resData.game_parameter) {
              this.game_prize_id = resData.game_parameter.game_prize_id
              this.gameResultVisible = true
              if (resData.game_parameter.ds && resData.game_parameter.ds.winning_value == 1) {
                this.getGamePrize = true
              } else {
                this.getGamePrize = false
                if (resData.game_parameter.notwinning) {
                  const baseMsg = this.gameinfo.give_point > 0 ? `,别灰心参与也有${this.gameinfo.give_point}${this.point_name}` : ''
                  const noPrizeMsg = resData.game_parameter.notwinning + baseMsg
                  this.game_prize_id.noPrizeMsg = noPrizeMsg
                }
              }
            }
          } else {
            this.getGamePrize = false
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 游戏的默认请求
       */
      activityGameFn() {
        activityGame(this.postParm).then(res => {
          // 加载状态结束
          if (res.status == 1) {
            const resData = res.data
            this.need_subscribe = resData.need_subscribe
            if (resData.need_subscribe == 1) {
              this.$refs.shopCode.dialogVisible = true
              return false
            }
            this.gameprizeinfo = resData.gameprizeinfo
            this.winerLists.push(...resData.winer_lists)
            this.gameinfo = resData.gameinfo
            this.point_name = resData.point_name
            this.cost_point = resData.cost_point
            this.give_point = resData.give_point
            this.loading = false
            if (resData.winer_lists.length < 10) {
              this.finished = true
            }
            this.shareInfo = {
              title: resData.jsapi_title,
              imgUrl: resData.jsapi_img,
              shareParam: resData.jsapi_url.split('?')[1]
            }
            this.postParm.p++
            mpShare(true, false, '/activity/pages/cartoonMachine/index', this.shareInfo)
          } else {
            this.$Error(res.msg)
          }
        })
      },
      init() {
        setInterval(() => {
          this.linghtActive = !this.linghtActive
        }, 400)
        const param = Object.assign({}, this.postData)
        param.id = this.$route.query.id
        if (this.$route.query.id) {
          param.order_id = this.$route.query.order_id
        }
        this.postParm = param
        this.activityGameFn()
      },
      gameReload(){
        refreshPage(this)
        this.init()
      }
    },
    mounted() {
      this.init()
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
      window.addEventListener('wxshow', () => {
        small.HandleShareParams()
        if(!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
        }
      })
      window.$$subscribe('loginReload', reload => {
        if (reload) {
          this.init()
        }
      })
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/game.scss';
  .lhj-wrap{
    background-color: #3a03a9;
    padding-bottom: 40px;
    .van-list__error-text, .van-list__finished-text, .van-list__loading{
      color: #fff;
    }
    .lhj_main_top {
    	width: 100%;
    	height: 1080px;
    	overflow: hidden;
    	background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/lhjbg.png) no-repeat #3a03a9 center;
    	background-size: 100% 100%;
    }

    .lhj_tit {
    	margin: 120px auto 0;
    	width: 59%;
    	height: 100px;
    	background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/lhj_title.png) no-repeat;
    	background-size: contain;
    	background-size: 100% 100%
    }

    .lhj {
    	position: relative;
    	width: 74%;
    	height: 70%;
    	background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/lhj_main.png) no-repeat center;
    	background-size: 100% 100%;
    	margin-left: 13%;
    	margin-top: 100px;
    	overflow: hidden;
      .shuoming {
      	position: absolute;
      	width: 84%;
      	height: 26%;
      	background: url(https://img.wifenxiao.com/h5-wfx/images/marketGame/cartoonMachine/shuoming.png) no-repeat;
      	background-size: 100% 100%;
      	top: 69.5%;
      	left: 50%;
      	transform: translateX(-50%);
        h2 {
        	width: 89%;
        	line-height: 52px;
        	color: #893800;
        	font-weight: bold;
        	border-bottom: 2px dashed #ba9b82;
        	margin: 0 auto;
        	text-align: center;
        	font-size: 26px;
        }
        div {
        	padding: 10px 0;
        	width: 91%;
        	height: 55%;
        	font-size: 24px;
        	line-height: 28px;
        	color: #893800;
        	overflow: scroll;
        	margin: 0 auto;
        }
      }
      .deng {
      	position: absolute;
      	display: none;
      	width: 92.34%;
      	height: 42.82%;
      	top: 5.19%;
      	left: 50%;
      	transform: translateX(-50%);
      	z-index: 2;
        &.active {
          display: block;
        }
      }
    }

    .yaogan-wrap {
    	position: absolute;
    	width: 96px;
    	height: 156px;
    	z-index: 5;
    	bottom: 40%;
    	right: 0;
      .dizuo {
      	position: absolute;
      	z-index: 1;
      	bottom: 0;
      	width: 30px;
      }
      .yaogan {
      	top: 0;
      	position: absolute;
      	z-index: 2;
      	width: 88px;
        .cur {
          transform: rotate(-15deg);
          -moz-transform-origin: 0 100%;
          -webkit-transform-origin: 0 100%;
          -o-transform-origin: 0 100%;
          transition: all 0.2s linear;
        }
      }
    }
    .yaogan {
    	position: absolute;
    	z-index: 5;
    	top: 40%;
    	right: 0;
    	height: 150px
    }
    .win-record .win-nav span:nth-child(2){
      width: 25%;
    }
    .win-record ul li span{
      text-align: center;
    }
    .win-record ul li span:nth-child(4){
      width: 30%;
    }
    .slotMachine {
    	width: 23%;
    	height: 26%;
    	border: 4px solid #fff;
    	position: absolute;
    	border-radius: 10px;
    	top: 11.5%;
    	background-color: #eaeaea;
    	overflow: hidden
    }

    .slot {
    	width: 100%;
    	margin-top: -64%;
      img {
      	width: 100%
      }
    }

    .slotMachineContainer {
    	height: 100%;
    	margin-top: -30%
    }

    .machine1 {
    	left: 13%
    }

    .machine2 {
    	left: 38%
    }

    .machine3 {
    	left: 63%
    }

    .slotMachineButton {
    	position: absolute;
    	width: 57%;
    	left: 22%;
    	height: 16%;
    	top: 45%;
    	z-index: 3
    }

    .x-same_lhj {
    	color: #fee58c !important;
    	margin: 0 36px;
    	color: #fff;
    	overflow: hidden;
      .x-img {
      	margin: 30px 0;
      	position: relative;
        img {
        	height: 28px;
        	display: block;
        	margin: 0 auto
        }
        b {
        	display: block;
        	letter-spacing: 4px;
        	font-style: italic;
        	font-size: 30px;
        	text-align: center;
        	font-weight: bold;
        	position: absolute;
        	top: -8px;
        	left: 50%;
        	transform: translateX(-50%)
        }
      }
      ul,.record_table{
        background-color: #6d31e7;
        border-radius: 16px;
        padding: 60px 100px;
        position: relative;
        &.liwu{
          li {
          	font-weight: bold;
          }
        }
        &.time {
          padding: 56px 40px;
          li {
          	font-size: 24px
          }
        }
        li{
          line-height: 50px;
          font-size: 28px;
          font-weight: normal;
          letter-spacing: 2px;
          display: block;
          line-height: 60px;
          color: #fff;
        }
        .jiaobiao{
          position: absolute;
          width: 14px;
          &.jiaobiao1{
            top: 10px;
            left: 10px;
          }
          &.jiaobiao2 {
            top: 10px;
            right: 10px;
          }
          &.jiaobiao3 {
            bottom: 10px;
            left: 10px;
          }
          &.jiaobiao4 {
            bottom: 10px;
            right: 10px
          }
        }
      }
      .record_table {
      	padding: 40px 32px;
        .win-nav {
        	border-bottom: 2px solid #6021d8;
        	padding-bottom: 20px;
          span {
          	color: #fff;
          	font-size: 26px;
          	text-indent: 0;
          	font-weight: bold;
          }
        }
        .win-list-con {
          /*height: auto;*/
          /*max-height: initial;*/
          /*overflow: scroll;*/
          ul {
          	padding: 0;
          	border-radius: 0;
            li {
            	border-bottom: 2px solid #6021d8;
            	line-height: 100px;
            	padding: 28px 0 28px;
            	box-sizing: border-box;
              span {
              	border: 0;
              	line-height: 40px;
              	height: auto;
              }
            }
          }
        }

      }
      .loadmore {
      	padding: 0;
      	position: relative;
      	bottom: 86px
      }
    }



    .lhj_int_dzp p {
    	line-height: 50px;
    	margin-left: 5%;
    	font-size: 26px;
    	letter-spacing: 2px
    }

    .lhj_int_dzp pre {
    	color: #fee58c !important;
    	line-height: 50px;
    	margin-left: 3%;
    	font-size: 26px;
    	letter-spacing: 2px
    }

    .varchar a {
    	color: #fff
    }

    @-webkit-keyframes cartoon {
    	from {
    		margin-top: -41%
    	}

    	25% {
    		margin-top: -155%
    	}

    	50% {
    		margin-top: -267%
    	}

    	75% {
    		margin-top: -380%
    	}

    	to {
    		margin-top: -496%
    	}
    }

    @keyframes cartoon {
    	from {
    		margin-top: -41%
    	}

    	25% {
    		margin-top: -155%
    	}

    	50% {
    		margin-top: -267%
    	}

    	75% {
    		margin-top: -380%
    	}

    	to {
    		margin-top: -496%
    	}
    }

    .cartoon {
    	animation: cartoon 0.5s linear infinite;
    	-moz-animation: cartoon 0.5s linear infinite;
    	-webkit-animation: cartoon 0.5s linear infinite;
    	-o-animation: cartoon 0.5s linear infinite
    }

    @-webkit-keyframes cartoon1 {
    	from {
    		margin-top: -155%
    	}

    	25% {
    		margin-top: -267%
    	}

    	50% {
    		margin-top: -381%
    	}

    	50% {
    		margin-top: -496%
    	}

    	to {
    		margin-top: -609%
    	}
    }

    @keyframes cartoon1 {
    	from {
    		margin-top: -155%
    	}

    	25% {
    		margin-top: -267%
    	}

    	50% {
    		margin-top: -381%
    	}

    	50% {
    		margin-top: -496%
    	}

    	to {
    		margin-top: -609%
    	}
    }

    .cartoon1 {
    	animation: cartoon 0.5s linear infinite;
    	-moz-animation: cartoon 0.5s linear infinite;
    	-webkit-animation: cartoon 0.5s linear infinite;
    	-o-animation: cartoon 0.5s linear infinite
    }

  }
</style>
